<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<cms:ads   code="'img_P1DuJ0',
'ZY_ShouYe_1',
'ZY_GongSiJieShao_2',
'ZY_ChanPinZhongXin_3',
'ZY_ShengChanZhongXin_4',
'ZY_ZhiLiangGuanLi_5',
'ZY_FuWuZhiChi_6',
'ZY_GongSiXinWen_7',
'ZY_LianXiWoMen_8',
'img_HSMTY9'
"  ></cms:ads>
<div class="header-wrap top" id="header"> 
 <div class="header flex align-center space-between  animate__animated animate__fadeInDown"> 
  <div class="flex align-center"> 
   <img src="${img_P1DuJ0.adImg}" class="logo zy" data-type="ad" data-id="${img_P1DuJ0.adId}"> 
  </div> 
  <ul class="nav-wrap flex align-center">

   <c:forEach var="item" items="${pcNav }">
    <c:if test="${fn:contains(item.navUrl, 'http')}">
     <li class="${fn:length(item.childrenNav) >0 ? "nav-item navElement nav-item-hover" : "nav-item navElement"}"><a href="${item.navUrl }">${item.navName }</a>

      <c:if test="${fn:length(item.childrenNav) >0  }">
       <div class="nav-layout">
        <c:forEach var="childer" items="${item.childrenNav }">

         <c:if test="${fn:contains(childer.navUrl, 'http')}">
          <h3 class="nav-sub-item"><a href="${childer.navUrl}">${childer.navName }</a></h3>
         </c:if>

         <c:if test="${!fn:contains(childer.navUrl, 'http')}">
          <h3 class="nav-sub-item"><a href="${path }/${childer.navUrl}">${childer.navName }</a></h3>
         </c:if>

        </c:forEach>
       </div>
      </c:if>
     </li>
    </c:if>

    <c:if test="${!fn:contains(item.navUrl, 'http')}">
     <li class="${fn:length(item.childrenNav) >0 ? "nav-item navElement nav-item-hover" : "nav-item navElement"}"><a href="${path }/${item.navUrl }">${item.navName }</a>
      <c:if test="${fn:length(item.childrenNav) >0  }">
       <div class="nav-layout">
        <c:forEach var="childer" items="${item.childrenNav }">

         <c:if test="${fn:contains(childer.navUrl, 'http')}">
          <h3 class="nav-sub-item"><a href="${childer.navUrl}">${childer.navName }</a></h3>
         </c:if>

         <c:if test="${!fn:contains(childer.navUrl, 'http')}">
          <h3 class="nav-sub-item"><a href="${path }/${childer.navUrl}">${childer.navName }</a></h3>
         </c:if>

        </c:forEach>
       </div>
      </c:if>
     </li>
    </c:if>
   </c:forEach>
   <li class="nav-img"><a href="${img_HSMTY9.adUrl}"><img src="${img_HSMTY9.adImg}" class="zy" data-type="ad" data-id="${img_HSMTY9.adId}"></a></li>
  </ul> 
 </div> 
</div>
<script>
 var itemEls = document.getElementsByClassName('nav-item-hover');
 for(var i= 0; i < itemEls.length;i++){
  itemEls[i].onmouseover = function(){
   var els = this.getElementsByClassName('nav-layout');
   if(els.length) {
    els[0].style.display = 'block'
   };
  }
  itemEls[i].onmouseout = function(){
   var els = this.getElementsByClassName('nav-layout');
   if(els.length) {
    els[0].style.display = 'none'
   };
  }
 }
</script>